<template lang="jade">
  swiper-component(:if-pagination="true")
    .swiper-slide(slot="slides", v-for="img in slides")
      img(:src="img")
      //- a.bottom
      //-   i.fa.fa-shopping-cart
      //-   | 包邮
      //- a.top-right
      //-   i.fa.fa-heart
      //- a.top-right
      //-   i.fa.fa-arrow-right
      //- a.top-left
      //-   i.fa.fa-arrow-left
</template>

<script>
  import swiperComponent from 'swiper.vue'

  var swiper

  export default {
    components: {
      swiperComponent
    },
    data() {
      return {
        slides: ['https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1461168172&di=a5acf27d2c50b0f1ce537d84b81d330c&src=http://img4.duitang.com/uploads/item/201312/05/20131205172421_QKF4K.jpeg','http://img4.duitang.com/uploads/item/201312/05/20131205172433_GPhxi.thumb.600_0.jpeg']
      }
    },
    ready() {
      swiper = Swiper('.swiper-container', {
        pagination: '.swiper-pagination'
      })
    }
  }

</script>

<style lang="less" scoped>
  .swiper-slide img {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    position: relative;
    a {
      position: absolute;
      z-index: 999;
      color: #fff;
      display: block;
    }
    .bottom {
      bottom: 1rem;
      right: 0.5rem;
      background-color: #2196f3;
      border-radius: 1.5rem;
      border: 0.07rem solid #000;
      padding: 3px 0.71rem;
      font-size: 0.8rem;
      i {
        margin-right: 0.3rem;
      }
    }
    .top-right {
      top: 1rem;
      right: 2.8rem;
      i {
        margin-right: 1rem;
        font-size: 1.2rem;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .top-right + .top-right {
      right: 0.7rem;
    }
    .top-left {
      top: 1rem;
      left: 0.7rem;
      i {
        font-size: 1.2rem;
      }
    }
  }
</style>
